<style scoped>
.line{
    height: 0px;
    border-bottom: 1px solid #ddd;
    margin-top: 15px;
    margin-bottom: 15px;
}
.pro-detail-content{
    padding-left: 20px;
}
.pr20{
    padding-right: 20px;
}
h3{
    margin-bottom: 20px;
}
</style>
<style>

</style>

<template>
  <div class="pro-detail">
        <product-title></product-title>
        <div class="pro-detail-content pr20">  
             <!-- ref="proform" :rules="ruleValidate"          -->
            <Form :model="proform" ref="proform" :rules="ruleValidate" label-position="right"  :label-width="100">
                
                <FormItem label="佣金名称" prop="name">
                    <Row>
                        <Col :md="24" :lg="8">
                        <Input v-model="proform.name" placeholder="请输入佣金名称"></Input>
                        </Col>
                    </Row>
                </FormItem>                                    
                <FormItem label="产品名称" prop="ptid">
                    <Row>
                        <Col :md="24" :lg="8">
                            <Select v-model="proform.ptid" filterable @on-change="proChange($event)"  placeholder="请选择产品">
                                <Option :value="key" v-for="(value, key) in prolist" :key="key">{{value.name}}</Option>                               
                            </Select>
                        </Col>
                    </Row> 
                </FormItem> 
                <FormItem label="角色" prop="role_id">
                    <Row>
                        <Col :md="24" :lg="8">
                            <Select v-model="proform.role_id"  placeholder="请选择角色">                            
                                <Option :value="item.id" v-for="(item,index) in role" :key="item.id">{{item.name}}</Option>                           
                            </Select>
                        </Col>
                    </Row>
                </FormItem>                                                  
                <Row>
                    <Col class="line">
                    </Col>
                </Row>
                <h3>折标系数</h3>
                <div v-for="(items, index) in proform.scaling" :key="index">
                    <Row>                                                  
                        <Col :md="24" :lg="8"> 
                            <FormItem  :label="'交费期间'">                          
                                <Select v-model="items.pay_period"  placeholder="请选择交费期间">                                        
                                    <Option :value="item" v-for="item in pay_period" :key="item">{{item}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                                                
                        <Col :xs="16" :sm="16" :md="16" :lg="8" offset="1">
                            <FormItem  :label="'折标系数'">
                                <Input v-model="items.val" placeholder="请输入折标系数">
                                    <span slot="append">%</span>
                                </Input>
                            </FormItem>
                        </Col>

                        <Col :xs="6" :sm="6" :md="6" :lg="4" offset="1">
                            <Button type="ghost" @click="scalingRemove(index)">删除</Button>
                        </Col>
                    </Row>                    
                </div>
                <FormItem>
                        <Row>
                            <Col :xs="24" :sm="24" :md="11" :lg="4">
                                <Button type="info" long @click="scalingAdd()" icon="plus-round">新增折标系数</Button>
                            </Col>
                        </Row>
                    </FormItem>
                <Row>
                    <Col class="line">
                    </Col>
                </Row>
                <h3>佣金系数</h3>
                <div v-for="(item, index) in proform.fees" :key="index">
                    <FormItem                                      
                        :label="'年次'"                    
                        :rules="{required: false, message: '交费期间' + (index + 1) +'不能为空', trigger: 'blur'}">
                        <Row>
                            <Col :md="24" :lg="8">                           
                                <Select v-model="proform.fees[index].times"  placeholder="请选择年次">
                                    <Option value="1">第1次</Option>
                                    <Option value="2">第2次</Option>
                                    <Option value="3">第3次</Option>
                                    <Option value="4">第4次</Option>
                                    <Option value="5">第5次</Option>
                                    <Option value="6">第6次及以上</Option>
                                </Select>
                            </Col>                            
                        </Row>
                    </FormItem>
                    <template v-if="proform.fees[index].period">
                        <FormItem                                       
                            :label="'保险期间'"
                            :rules="{required: false, message: '保险期间' + (index + 1) +'不能为空', trigger: 'blur'}">
                            <Row>
                                <Col span="8">                           
                                    <Select v-model="proform.fees[index].period"  placeholder="请选择保险期间">
                                    <Option :value="item" v-for="item in period" :key="item">{{item}}</Option>                                    
                                    </Select>
                                </Col>
                                <Col span="4" offset="1">
                                    <Button type="ghost" @click="periodRemove(index)">删除</Button>
                                </Col>
                            </Row>
                        </FormItem>
                    </template>
                    <template v-if="!proform.fees[index].period">
                        <FormItem>
                            <Row >                           
                                <Col span="4" offset="1">
                                    <Button type="info" @click="periodAdd(index)">新增保险期间</Button>
                                </Col>
                            </Row>
                        </FormItem>
                    </template>
                    <div v-for="(item, cindex) in proform.fees[index].fee" :key="cindex">
                        <Row>                                                  
                            <Col :md="24" :lg="8"> 
                                <FormItem  :label="'交费期间'">                          
                                    <Select v-model="proform.fees[index].fee[cindex].pay_period"  placeholder="请选择交费期间">                                        
                                        <Option :value="item" v-for="item in pay_period" :key="item">{{item}}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                                
                            
                       
                            <Col :xs="16" :sm="16" :md="16" :lg="8" offset="1">
                                <FormItem  :label="'佣金比例'">
                                    <Input v-model="proform.fees[index].fee[cindex].val" placeholder="请输入佣金比例">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                            </Col>

                            <Col :xs="6" :sm="6" :md="11" :lg="4" offset="1">
                                <Button type="ghost" @click="feesRemove(index,cindex)">删除</Button>
                            </Col>
                        </Row>
                    </div>
                    <FormItem>
                        <Row>
                            <Col :xs="24" :sm="24" :md="11" :lg="4">
                                <Button type="info" long @click="feesAdd(index)" icon="plus-round">新增佣金比例</Button>
                            </Col>
                        </Row>
                    </FormItem>
                    <Row>
                        <Col class="line">
                        </Col>
                    </Row> 
                </div>                                                                                 
                <FormItem>
                    <Row>
                        <Col :xs="24" :sm="24" :md="11" :lg="4">
                            <Button type="primary" long @click="timesAdd" icon="plus-round">新增年次</Button>
                        </Col>
                    </Row>
                </FormItem>                 
                <Row>
                    <Col class="line">
                    </Col>
                </Row>
                <FormItem>
                    <Button type="primary" @click="sendAll('proform')">提交</Button>
                    <Button type="ghost" @click="cancel()" style="margin-left: 8px">取消</Button>
                </FormItem>                 
            </Form>                
        </div>
       
  </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import { getProListAll } from '../../api/product_v2'
import {   createFee} from '../../api/fee'
import { getRoleAll } from '../../api/role'
export default {
    data () {
        return {
            proform:{
                name:'',           
                ptid:'',
                role_id:'',
                scaling:[
                    {
                        pay_period:"",
                        val:''
                    }, 
                ],
                fees:[
                    {
                        times:"1",
                        period:"",
                        fee:[
                            {
                                pay_period:"",
                                val:''
                            },                           
                        ]
                    },
                ]
            },
            prolist:[

            ],
            period:[

            ],
            pay_period:[

            ],
            role:[

            ],
            ruleValidate:{
                name: [
                    { required: true, message: '佣金名称不能为空', trigger: 'blur' }
                ],
                ptid: [
                    { required: true, message: '产品名称不能为空', trigger: 'change' }
                ],
                role_id: [
                    { required: true, message: '角色不能为空', trigger: 'change' }
                ],
            }
        }
    },
    components: {
        productTitle,
        
    },
    mounted () {

    },
    created () {
        this.getList()
        this.getRole()
    },
    watch: {
        '$route' (to, from) {
      // 对路由变化作出响应...
        
        }
    },
    methods: {
        proChange (index) {
            //console.log(index)
            var _prolist = this.prolist[index]
            this.period = _prolist.period   
            this.pay_period = _prolist.pay_period       
        },
        periodAdd (index) {
            console.log(index)
            //this.proform.fees[index].period = this.period[0]
            //console.log(this.proform.fees[index].period)
           // console.log(this.proform.fees[index].period?true:false)
            this.$set(this.proform.fees[index],'period',this.period[0])
        },
        feesAdd (index) {
            this.proform.fees[index].fee.push({
                pay_period:'',
                val:''
            })
        },
        timesAdd () {
            this.proform.fees.push({
                fee:[{
                    pay_period:'',
                    val:''
                }]
            })
        },
        scalingAdd(){
            this.proform.scaling.push(
                {
                    pay_period:'',
                    val:''
                }
            )
        },
        scalingRemove(index){
            this.proform.scaling.splice(index, 1);
        },
        periodRemove (index) {
            this.proform.fees[index].period = '';
        },
        payTypeRemove (index) {
            this.proform.pay_type.splice(index, 1);
        },
        handleRemove (index) {
            this.proform.pay_period.splice(index, 1);
        },
        feesRemove (index,cindex) {
            this.proform.fees[index].fee.splice(cindex, 1);
        },
        getList(){
            new Promise((resolve, reject) => {
                getProListAll().then(response => {
                    console.log(response.data)
                    if(response.data.err == 0){
                         this.prolist = response.data.data

                    } else {
                       this.$Message.error(response.data.info);
                    }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getRole() {
            new Promise((resolve, reject) => {
                getRoleAll().then(response => {
                    console.log(response.data)
                    if(response.data.err == 0){
                         this.role = response.data.data

                    } else {
                       this.$Message.error(response.data.info);
                    }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        sendAll(name) {
            this.$refs['proform'].validate((valid) => {
                if (valid) {
                    new Promise((resolve, reject) => {
                        createFee(this.proform).then(response => {
                            if(response.data.err == 0){
                                this.$Message.success(response.data.info);
                                this.$router.push({'name':'fee_manage'});   
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });

                } else {
                }
            })
        },
        cancel() {            
            this.$router.push({'name':'fee_manage'});      
        }
    }
}
</script>

